<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>movie</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css\movie.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css\movie2.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css\common.css">
</head>
<body>
<header>
    <iframe src="${pageContext.request.contextPath}/top.jsp" frameborder="0" scrolling="no" id="top"></iframe>
</header>
<!--header end-->

<div class="mian-cur-position">
    <div class="ycimg">
        <img src="${pageContext.request.contextPath}/images/regbc.jpg">
        <ul>
            <li>影城名称：青鸟影城</li>
            <li>详细地址：成华区建设南支路4号</li>
            <li>联系电话：028-84773773</li>
        </ul>
    </div>
</div>
<div class="center-wrap">
    <ul class="tab-list">
        <li id="seat" class="J_seat">
            <a href="${pageContext.request.contextPath}/getMovie?movieName=我要我们在一起">选座购票</a>
        </li>
        <li id="coupon" class="J_coupon">
            <a href="${pageContext.request.contextPath}/MovieTui">团购</a>
        </li>
        <li id="detail" class="J_detail">
            <a href="${pageContext.request.contextPath}/MovieXx">影院信息</a>
        </li>

    </ul>
</div>

    <c:if test="${movie !=  null}">
<div class="w-seat-wrapper">
        <div class="filter-wrap">
            <ul class="filter-select">
                <li>
                    <label>选择影片</label>
                    <div class="select-tags">
                        <c:forEach items="${movieList}" var="m">
                            <c:choose>
                                <c:when test="${movie.movieName eq m.movieName}">
                                    <a class="current" href="${pageContext.request.contextPath}/getMovie?movieName=${m.movieName}" >${m.movieName}</a>
                                </c:when>
                                <c:otherwise>
                                    <a href="${pageContext.request.contextPath}/getMovie?movieName=${m.movieName}" >${m.movieName}</a>
                                </c:otherwise>
                            </c:choose>
                        </c:forEach>
                    </div>
                </li>
                <li>
                    <label>选择时间</label>
                    <div class="select-tags">
                        <a class="current"href="#"><fmt:formatDate value="${movie.movieRelease}" pattern="yyyy-MM-dd"/></a>
                    </div>
                </li>
            </ul>
        </div>

        <!-- movie bar -->
        <div class="movie-wrapper">
            <img class="movie-post" src="${movie.movieImg}">
            <div class="movie-info-wrap">
                <h4 class="info-title">
                    <a href="#" class="movie-name">${movie.movieName}<small class="score">7.8</small></a></h4>
                <div class="right-info">
                    <a class="detail" href="${pageContext.request.contextPath}/getMovieByMovieName?movieName=${movie.movieName}"  target="_parent">查看影片详情&nbsp;&gt;</a>
                </div>
                <div class="movie-info">
                    <ul>
                        <li>导演：${movie.movieDirector}</li>
                        <li>主演：${movie.movieProtagonist}</li>
                        <li>类型：
                            <c:forEach items="${movie.movietemps}" var="m">
                                ${m.tempName}
                            </c:forEach>
                        </li>
                        <li>片长：${movie.movieTime}分钟</li>
                        <li>剧情介绍：${movie.movieDescribe}</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Hall Tabel-->
        <div class="center-wrap">
            <table class="hall-table">
                <thead>
                <tr>
                    <th class="hall-time">放映时间</th>
                    <th class="hall-name">放映厅</th>
                    <th class="hall-flow">座位情况</th>
                    <th class="hall-price">现价/影院价（元）</th>
                    <th class="hall-buy">选座购票</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${hall}" var="h">
                    <tr>
                        <td class="hall-time">
                            <em class="bold"><fmt:formatDate value="${h.beginDate}" pattern="yyyy-MM-dd"/></em>
                            预计<fmt:formatDate value="${h.beginDate}" pattern="HH:mm"/>散场
                        </td>
                        <td class="hall-name">
                                ${h.hallName}
                        </td>
                        <td class="hall-flow">
                            <div class="flowing-wrap flowing-loose">
                                <label> 宽松  </label>
                                <span class="flowing-vol"><i style="width:0.0%"></i></span>
                                <span class="flowing-view J_flowingView" data-scheduleid="879395115">
                                    <i class="icon-zoom"></i>
                                    <div class="view-wrap" style="display:none;">
                                        <div class="view-box">加载中...</div>
                                    </div>
                                </span>
                            </div>
                        </td>
                        <td class="hall-price" data-partcode="yueke">
                            <em class="now">${h.moviePrise}</em>
                            <del class="old">${h.moviePrise}</del>
                        </td>
                        <td class="hall-seat">
                            <a class="seat-btn" href="Seat?scheduleId=${h.scheduleId}">选座购票</a>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
</div>
    </c:if>


    <c:if test="${movieTui != null}">
<div class="w-seat-wrapper">
        <div class="bg">
            <div class="coupon-message">
                <ul>
                    <li>团购券购买说明：</li>
                    <li>1、成功购买团购券后，将收到带有验证码的短信，凭验证码至影院柜台进行兑换。</li>
                    <li>2、请注意团购券有效期、节假日使用规则、3D/IMAX使用规则等说明。</li>
                    <li>3、团购券售后条例以具体店铺和宝贝详情描述为准。</li>
                </ul>
            </div>
            <table class="hall-table">
                <thead>
                <tr>
                    <th class="hall-name">优惠券</th>
                    <th class="hall-flow">有效期</th>
                    <th class="hall-price">现价/面值（元）</th>
                    <th class="hall-hasbuy">已售</th>
                    <th class="hall-buy">购买</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td colspan="8">
                        <div class="error-wrap">囧 ~没有找到你需要的团购券，你可以换个影院试试
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
</div>
    </c:if>

    <c:if test="${movieXx != null}">
        <div class="center" style="display: block;">
            <div class="cinema-detail-item">
                <div class="title-wrap">
                    <h3 class="special-detail-hook">影院介绍</h3>
                </div>
                <ul>
                    <li><span>详细地址： </span>成华区府青路街道二环路北四段3号中影晴瑞影城王府井4楼 </li>
                    <li><span>联系电话：</span>028-63925118</li>
                </ul>

            </div>

            <div class="cinema-detail-item">
                <h3 class="traffic-server-hook">交通信息</h3>
                <ul>
                    <li><span>地图：</span></li>
                </ul>
                <!--引用百度地图API 开始-->

                <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
                <!--百度地图容器-->
                <div id="dituContent"></div>
                <script type="text/javascript">//创建和初始化地图函数：
                function initMap(){
                    createMap();//创建地图
                    setMapEvent();//设置地图事件
                    addMapControl();//向地图添加控件
                    addMarker();//向地图中添加marker
                }

                //创建地图函数：
                function createMap(){
                    var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
                    var point = new BMap.Point(116,39);//定义一个中心点坐标
                    map.centerAndZoom(point,18);//设定地图的中心点和坐标并将地图显示在地图容器中
                    window.map = map;//将map变量存储在全局
                }

                //地图事件设置函数：
                function setMapEvent(){
                    map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
                    map.enableScrollWheelZoom();//启用地图滚轮放大缩小
                    map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
                    map.enableKeyboard();//启用键盘上下左右键移动地图
                }

                //地图控件添加函数：
                function addMapControl(){
                    //向地图中添加缩放控件
                    var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
                    map.addControl(ctrl_nav);
                    //向地图中添加缩略图控件
                    var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
                    map.addControl(ctrl_ove);
                    //向地图中添加比例尺控件
                    var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
                    map.addControl(ctrl_sca);
                }

                //标注点数组
                var markerArr = [{title:"百度地图提醒",content:"全国咨询热线：028-63925118<br/>电话：1837774444<br/>E-mail：1845527555@qq.com<br/>地址：成都市龙泉驿区阳光城",point:"116.357126|39.98684",isOpen:1,icon:{w:23,h:25,l:46,t:21,x:9,lb:12}}
                ];
                //创建marker
                function addMarker(){
                    for(var i=0;i<markerArr.length;i++){
                        var json = markerArr[i];
                        var p0 = json.point.split("|")[0];
                        var p1 = json.point.split("|")[1];
                        var point = new BMap.Point(p0,p1);
                        var iconImg = createIcon(json.icon);
                        var marker = new BMap.Marker(point,{icon:iconImg});
                        var iw = createInfoWindow(i);
                        var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
                        marker.setLabel(label);
                        map.addOverlay(marker);
                        label.setStyle({
                            borderColor:"#808080",
                            color:"#333",
                            cursor:"pointer"
                        });

                        (function(){
                            var index = i;
                            var _iw = createInfoWindow(i);
                            var _marker = marker;
                            _marker.addEventListener("click",function(){
                                this.openInfoWindow(_iw);
                            });
                            _iw.addEventListener("open",function(){
                                _marker.getLabel().hide();
                            })
                            _iw.addEventListener("close",function(){
                                _marker.getLabel().show();
                            })
                            label.addEventListener("click",function(){
                                _marker.openInfoWindow(_iw);
                            })
                            if(!!json.isOpen){
                                label.hide();
                                _marker.openInfoWindow(_iw);
                            }
                        })()
                    }
                }
                //创建InfoWindow
                function createInfoWindow(i){
                    var json = markerArr[i];
                    var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
                    return iw;
                }
                //创建一个Icon
                function createIcon(json){
                    var icon = new BMap.Icon("{$WEB.Map_minIco}", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})

                    return icon;
                }

                initMap();//创建和初始化地图
                </script>
                <!--引用百度地图API 结束-->
                <div class="search-map">
                    <form action="http://www.amap.com/" class="M-form-search"target="_blank" accept-charset="utf-8">
                        <input name="_tb_token_" type="hidden">
                        <div class="search-map-tab">
                            <div class="M-search-item">驾车</div>
                            <div class="M-search-item">公交</div>
                        </div>
                        <div class="input-wrapper">
                            <span>起</span><input class="M-start-search" type="text" placeholder="请输入起点">
                            <br>
                            <span>终</span><input class="M-end-search" type="text" placeholder="请输入终点">
                        </div>
                        <a href="#" class="search-submit-button">查询</a>
                    </form>
                </div>
            </div>
        </div>
    </c:if>

<iframe src="${pageContext.request.contextPath}/foot.jsp" frameborder="0" scrolling="no" id="foot"></iframe>
</body>
</html>